<template>
    <div class="froms">
        <el-dialog  :title="title"  :visible.sync="Visible" width="45%" :before-close="handleClose">
            <el-form :model="UserData"  style="width:100%" ref="UserData" :rules="rules">
                <el-row>
                    <el-col :span="11">
                        <el-form-item  label="用户ID" :label-width="formLabelWidth" prop="userid">
                            <el-input  v-model="UserData.userid" placeholder="请输入用户ID">
                            </el-input>
                        </el-form-item>
 <el-form-item label="选择部门" :label-width="formLabelWidth" prop="deptname">                           
                            <el-input  placeholder="请选择部门"  readonly type="text" v-model="UserData.deptname"  >
                                <el-button slot="append" @click="ClickDept()">  选择              
                                </el-button>
                            </el-input>
                        </el-form-item>
                        
                          <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                            <el-input   placeholder="请输入密码"  type="password" v-model="UserData.password">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
                            <el-input v-model="UserData.username" placeholder="请输入用户名称">
                            </el-input>
                        </el-form-item>
                       
                        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                            <el-input v-model="UserData.phone" placeholder="请输入手机号">
                            </el-input>
                        </el-form-item>
                       
                        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="conpassword">
                            <el-input  type="password" v-model="UserData.conpassword" placeholder="请输入确认密码">
                            </el-input>     
                        </el-form-item>           
                    </el-col>
                    <el-col >
                        <el-form-item label="选择角色" :label-width="formLabelWidth" prop="treelist">
                            <el-transfer                            
                             :titles="['未选', '已选']"
                             v-model="UserData.treelist" 
                             :data="data">
                            </el-transfer>
                        </el-form-item>                
               </el-col>
            </el-row>                  
            </el-form>       
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('UserData')">取 消</el-button>
                <el-button type="primary" @click="Add('UserData')">确 定</el-button>
            </div>
        </el-dialog>
        <div>
            <el-dialog
                title="选择部门"
                :visible.sync="VisibleTree"
              width="20%"
                :before-close="handleClose">                                  
                        <el-tree
                            class="filter-tree"
                             show-checkbox
                            :data="TreeData"
                            :props="defaultProps"
                            default-expand-all                           
                            @check="handleNodeClick"                 
                            ref="tree2">
                        </el-tree>                                           
                <span slot="footer" class="dialog-footer">
                    <el-button @click="VisibleTree = false">取 消</el-button>
                    <el-button type="primary" @click="VisibleTree = false">确 定</el-button>
                </span>
            </el-dialog>
         </div>
    </div>
</template>

<script>
 
export default {
    data(){
 
        return{
            rules:{
                userid:[
                    {required:true,message:'请输入用户ID',trigger:'change'}
                ],
                deptname:[
                    {required:true,message:'请选择部门',trigger:'change'}
                ],
                password:[
                    {required:true,message:'请输入密码',trigger:'change'}
                ],
                username:[
                    {required:true,message:'请输入用户名称',trigger:'change'}
                ],
                phone:[
                    {required:true,message:'请输入手机号',trigger:'change'}
                ],
                conpassword:[
                    {required:true,message:'请输入确认密码',trigger:'change'}
                ],
                treelist:[
                    {required:true,message:'请选择角色',trigger:'change'}
                ]
            },  
            UserData:{},
            formLabelWidth:'120px',
            title:'用户添加',
            Visible:false,
            VisibleTree:false,
            data:[],
            TreeData:[],
            defaultProps: {
            children: 'children',
            label: 'deptname'
            },
            TreeDeptid:-1
        }
    },
    mounted(){
        this.getRoleList();

    },
    methods:{
        // 选择部门放到部门列表中
        handleNodeClick(nodeTree) {
           this.UserData.deptname = nodeTree.deptname;
           this.TreeDeptid = nodeTree.deptid;
         //  this.handleClose();
        },
        //获取部门树 数据
        getTree(){
            var _this = this;
            _this.$api.Depttree().then((res)=>{      
                if(res.result =='ok'){
                    _this.TreeData =res.data;
                }    
            }).catch((err)=>{ 
                    _this.$message({ message:'数据获取失败', type:'error'});
            });
        },
         handleClose(){
            this.Visible = false;
            
        },
        //点击部门，弹出框 加载数据
         ClickDept(){
            this.VisibleTree =true;       
            this.getTree();
         },
         //获取觉得数据
        getRoleList(){
            var _this = this;
            _this.$api.RoleList().then((res)=>{
                if(res.result =="ok"){                                 
                    for(var i = 0; i<res.data.length;i++){                    
                        _this.data.push({
                            key:  res.data[i].roleid,
                            label:  res.data[i].rolename
                        });
                    }
                }else{
                    _this.$message({message:'获取失败',type:'error'});
                }
            })
        },
        //添加用户数据
        Add(UserData){
            var _this = this;
            _this.$refs[UserData].validate((valid)=>{
                if(valid){              
                    if(this.TreeDeptid==-1){
                        return  _this.$message({message:'请选择部门',type:'error'});
                    }
                    _this.UserData.deptid =  this.TreeDeptid;
                    var   deptobj ="";
                     for(var i = 0; i<_this.UserData.treelist.length;i++){
                         deptobj+=_this.UserData.treelist[i]+",";
                     }
                     _this.UserData.roleid = deptobj.substr(0,deptobj.length-1);
                    _this.$api.addUser(_this.UserData)
                    .then((res)=>{
                        if(res.result=="ok"){
                            _this.$message({message:res.msg,type:'success'});
                            _this.resetForm();
                            _this.$parent.getResult();
                        }                       
                    })
                    .catch((err)=>{
                        _this.$message({message:err.msg,type:'error'});
                    });
                }
            });
        },
         // 取消
        resetForm(){             
          this.$refs.UserData.resetFields();
          this.Visible =false;
        },
        handleClose(done){
           
            this.resetForm();
        }

    }
}
</script>

<style>

 
</style>
